<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>总结Vue数据监测</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<h1>学生信息</h1>
			<button type="button" @click="student.age ++">年龄+1岁</button><br>
			<button type="button" @click="addSex">添加性别属性,默认值为 : 男</button><br>
			<button type="button" @click="student.sex='未知'">修改性别</button><br>
			<button type="button" @click="addFriend">在列表首位添加一个朋友</button><br>
			<button type="button" @click="updataFirstFriendName">修改第一个朋友的名字为 ： 张三</button><br>
			<button type="button" @click="addHobby">添加一个爱好</button><br>
			<button type="button" @click="updateHobby">修改第一个爱好为:开车</button><br>
			<button type="button" @click="removeSmoke">过滤掉爱好中的抽烟</button><br>
			
			
			<h3>姓名:{{student.name}}</h3>
			<h3>年龄:{{student.age}}</h3>
			<h3 v-if="student.sex">性别:{{student.sex}}</h3>
			<h3>爱好</h3>
			<ul>
				<li v-for="(h,index) in student.hobby" :key="index">
					{{h}}
				</li>
			</ul>
			<h3>朋友们</h3>
			<ul>
				<li v-for="(f,index) in student.friends" :key="index">
					{{f.name}} - {{f.age}}
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false
			new Vue({
				el:"#root",
				data:{
					student:{
						name:"tom",
						age:18,
						hobby:["抽烟","喝酒","烫头"],
						friends:[
							{name:"jerry",age:35},
							{name:"tony",age:36}
						]
					}
				},
				methods:{
					addSex(){
						Vue.set(this.student,"sex","男")
					},
					addFriend(){
						this.student.friends.unshift({name:"yanglei",age:22})
					},
					updataFirstFriendName(){
						this.student.friends[0].name = "张三";
					},
					addHobby(){
						this.student.hobby.push("学习");
					},
					updateHobby(){
						// this.student.hobby.splice(0,1,"开车");
						// Vue.set(this.student.hobby,0,"开车");
						this.$set(this.student.hobby,0,"开车");
					},
					removeSmoke(){
					this.student.hobby = this.student.hobby.filter((h)=>{
							return h != '抽烟'
						})
					}
					
				
				}
			})
		</script>
	</body>
</html>
